window.onload = function () {
  var gotop = document.querySelectorAll('.tool-item')[5]
  // 滚动页面一定距离时出现回到顶部
  window.addEventListener('scroll',function () {
    if (window.pageYOffset > 500) {
      gotop.style.display = 'block'
    } else {
      gotop.style.display = 'none'
    }
  })
  // 点击回到顶部
  gotop.onclick = function () {
    window.scrollTo(0, 0)
  }

  // 轮播图
  // 获取轮播图的每个li
  var items = document.querySelectorAll('.swiper-slide')
  // 获取按钮
  var preBtn = document.querySelector('.swiper-pre')
  var nextBtn = document.querySelector('.swiper-next')
  // 获取分页圆点
  var points = document.querySelectorAll('.pagination-bullet')

  // 声明一个索引值代表当前图片
  var index = 0

  // 定时器的初始值
  var time = 0
  // 创建节流阀
  var flag = true

  // 创建清除类名的函数
  clearClass = function () {
    // 清除图片类名
    for (var i = 0; i < items.length; i++) {
      items[i].className = 'swiper-slide'
    }
    // 清除圆点类名
    for (var i = 0; i < points.length; i++) {
      points[i].className = 'pagination-bullet'
    }
  }
  // 创建去往对应index的图片的函数
  goIndex = function () {
    clearClass()
    items[index].className = 'swiper-slide active'
    points[index].className = 'pagination-bullet active'
  }
  // 创建去上一张的函数
  var goPre = function () {
    if (index > 0) {
      index--
    } else {
      // 到第一张时跳到最后一张
      index = items.length - 1
    }
    goIndex()
  }
  // 创建去下一张的函数
  var goNext = function () {
    if (index < 4) {
      index++
    } else {
      // 到最后一张时跳回第一张
      index = 0
    }
    goIndex()
  }
  // 给按钮绑定单击事件
  preBtn.addEventListener('click', function () {
    if (flag) {
      // 关闭阀门
      flag = false
      goPre()
      // 每次点击重置定时器
      time = 0
    }

  })
  nextBtn.addEventListener('click', function () {
    if (flag) {
      // 关闭阀门
      flag = false
      goNext()
      // 每次点击重置定时器
      time = 0
    }
  })

  // 给每个分页符绑定单击事件
  for (var i = 0; i < points.length; i++) {
    points[i].addEventListener('click', function () {
      if (flag) {
        // 关闭阀门
        flag = false
        // 获取标签中存储的数据
        var ptIndex = this.getAttribute('data-index')
        index = ptIndex
        goIndex()
        // 每次点击重置定时器
        time = 0
      }
    })
  }

  // 轮播图定时器
  setInterval(function () {
    time++;
    // 定时器每3s切换一次图片
    if (time == 30) {
      goNext();
      time = 0;
    }
    // 定时器过了1s才能开启阀门
    if (time == 10) {
      flag = true
    }
  }, 100)

  // 封装tab栏切换函数
  // 传递三个参数 标题的数组 内容数组 原始和激活的类名数组
  function tabSwitch(tabTitArr, tabConArr, baseActiveArr) {
    // 声明一个索引
    var tabIndex = 0
    // 定义清除类名的函数
    function clear() {
      for (var i = 0; i < tabTitArr.length; i++) {
        tabTitArr[i].className = baseActiveArr[0]
      }
    }
    for (var i = 0; i < tabTitArr.length; i++) {
      // 给每个tab标题绑定事件
      tabTitArr[i].addEventListener('mouseover', function () {
        // 清除类名
        clear()
        // 鼠标移入的标题改变类名
        this.className = baseActiveArr[1]
        // 获取tab标题标签中绑定的属性数据
        tabIndex = this.getAttribute('data-index')
        // 遍历内容div
        for (var i = 0; i < tabConArr.length; i++) {
          // 隐藏所有内容div
          tabConArr[i].style.display = 'none'
        }
        // 显示tab标题对应的div
        tabConArr[tabIndex].style.display = 'block'
      })
    }
  }

  // 家电tab栏切换
  var tabItems = document.querySelectorAll('.tab-item1')
  var appliance = document.querySelectorAll('.appliance')
  var base1 = ['tab-item1', 'tab-item1 active']
  // 调用函数
  tabSwitch(tabItems, appliance, base1)

  // 智能模块tab栏切换
  var tabItems2 = document.querySelectorAll('.tab-item2')
  var smart = document.querySelectorAll('.smart')
  var base2 = ['tab-item2', 'tab-item2 active']
  // 调用切换函数
  tabSwitch(tabItems2, smart, base2)


  //侧边栏移入变色
  var toolItems = document.querySelectorAll('.tool-item')
  function clearTool() {
    for (var i = 0; i < toolItems.length; i++) {
      toolItems[i].className = 'tool-item'
    }
  }
  for (var i = 0; i < toolItems.length; i++) {
    toolItems[i].addEventListener('mouseover', function () {
      var img1 = this.getElementsByClassName('tool-icon')[0].getElementsByTagName('img')[0]
      var img2 = this.getElementsByClassName('tool-icon')[0].getElementsByTagName('img')[1]
      img1.style.display = 'none'
      img2.style.display = 'block'
      clearTool()
      this.className = 'tool-item active'
    })
    toolItems[i].addEventListener('mouseout', function () {
      var img1 = this.getElementsByClassName('tool-icon')[0].getElementsByTagName('img')[0]
      var img2 = this.getElementsByClassName('tool-icon')[0].getElementsByTagName('img')[1]
      img1.style.display = 'block'
      img2.style.display = 'none'
      clearTool()
    })
  }

  // 定时器作倒计时(小米闪购)
  // 获取显示时间的对象
  var hour = document.querySelector('.hour')
  var minute = document.querySelector('.minute')
  var second = document.querySelector('.second')
  // 获取截止时显示的对象
  var endText = document.querySelector('.end')
  // 设置每天的截止时间
  var endTime = new Date().setHours(21, 00, 00)
  // 获取截止时间并转化为毫秒数
  var inputTime = new Date(endTime).valueOf();
  // 先调用一次防止刷新时无结果
  countDown();
  // 开启定时器每秒调用一次倒计时函数
  var setInt = setInterval(countDown, 1000);
  // 创建倒计时函数 countDown
  function countDown() {
    // 获取当前时间毫秒数
    var currentTime = Date.now().valueOf();
    // 得到时间差并转换成秒数
    var count = (inputTime - currentTime) / 1000;
    // console.log(count);
    if (count <= 0) {
      hour.innerHTML = '00'
      minute.innerHTML = '00'
      second.innerHTML = '00'
      clearInterval(setInt)
      endText.style.visibility = 'visible'
      return
    }
    // var d = parseInt(count / 60 / 60 / 24);
    // d = d < 10 ? '0' + d : d;
    var h = parseInt(count / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    hour.innerHTML = h
    var m = parseInt(count / 60 % 60);
    m = m < 10 ? '0' + m : m;
    minute.innerHTML = m
    var s = parseInt(count % 60);
    s = s < 10 ? '0' + s : s;
    second.innerHTML = s
    // return '还剩' + d + '天' + h + '时' + m + '分' + s + '秒';
  }

  // 图片懒加载
  // 获取图片列表，即img标签列表
  var imgs = document.querySelector('.lazyImg').getElementsByTagName('img');

  // 获取元素到浏览器可视区域顶部的距离
  function getTop(e) {
    return e.getBoundingClientRect().top;
  }

  // 懒加载实现
  function lazyload(imgs) {
    // 浏览器可视区域高度
    var h = window.innerHeight;
    // 遍历图片对象
  	for(var i=0;i<imgs.length;i++){
  		//浏览器可视区域高度大于图片到可视区域顶部的距离时懒加载
  		if (h>getTop(imgs[i])) {
  			imgs[i].src = imgs[i].getAttribute('data-src')
  		}
  	}
  }
  lazyload(imgs);

  // 屏幕滚动事件
  window.addEventListener('scroll',function () {
    lazyload(imgs);
  })

}